<!DOCTYPE html>
<meta charset="UTF-8">
<div style="padding: 10px; width: 490px; height: 300px;">
	<table id="contextmenu_grid" data-type="grid" title="简单的grid${rc.contextPath}" style="width: 700px; height: 250px"
		data-defs="singleSelect:true,collapsible:true,border:true,fit:true,fitColumns:true,
		method:'get',url: 'demo/testdata/grid_data1.json',
		onHeaderContextMenu:onHeaderContextMenu
		">
		<thead>
			<tr>
				<th data-defs="field:'itemid',width:80">ID</th>
				<th data-defs="field:'productid',width:200">产品名称</th>
				<th data-defs="field:'listprice',width:80,align:'right'">成本</th>
				<th data-defs="field:'unitcost',width:80,align:'right'">单价</th>
				<th data-defs="field:'attr1',width:100">属性</th>
				<th data-defs="field:'status',width:60,align:'center'">状态</th>
			</tr>
		</thead>
	</table>
</div>
<div id="contextmenu_menu" data-type="menu" style="width: 120px;" data-defs="onClick:contextmenuHandler">
	<div>隐藏列</div>
	<div class="menu-sep"></div>
	<div>显示隐藏的列</div>
</div>
<script type="text/javascript">
	function onHeaderContextMenu(e, field) {
	    e.preventDefault();
	    $('#contextmenu_menu').menu('show', {
	        left : e.pageX,
	        top : e.pageY,
	        property : {
		        field : field
	        }
	    });
    }
    var hidenFileds = [];
    var hidenFiledsIndex = 0;
    function contextmenuHandler(item, o) {
	    if (item.text == "隐藏列") {
		    hidenFileds[hidenFiledsIndex] = o.property.field;
		    hidenFiledsIndex++;
		    $('#contextmenu_grid').grid('hideColumn', o.property.field);
		    $('#contextmenu_grid').grid('resize');
	    } else if (item.text == "显示隐藏的列") {
		    for ( var i = 0; i < hidenFileds.length; i++) {
			    $('#contextmenu_grid').grid('showColumn', hidenFileds[i]);
		    }
		    $('#contextmenu_grid').grid('resize');
		    hidenFiledsIndex = 0;
		    hidenFileds = [];
	    }
    }
</script>
